<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监控平台</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.1.0/echarts-en.common.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/jquery-1.7.2.min.js"></script>
</head>

<body>
    <div class="header">
        <div class="logo">课堂考勤与状态监测平台</div>
        <div class="nav">
            <div class="nav-item ">
                <a href="./index.html">实时监测</a>
            </div>
            <div class="nav-item active">
                <a href="./huifang.html">课堂回放</a>
            </div>
            <div class="nav-item">
                <a href="">信息管理</a>
            </div>
        </div>
        <div style="margin-right: 30px;"> <img style="margin-top: 10px ;width: 20px; height: 20px;"
                src="./image/照片墙.png" alt=""> 管理员</div>
    </div>
    <div class="conent">
        <div class="left">
            <div class="touch">选择教室操作</div>
            <div class="list">

                <div class="tree" style="border: none;">
                    <ul>
                        <li>
                            <span><i class="icon-calendar"></i> 2019-2020第一学期</span>
                            <ul>
                                <li>
                                    <span class="badge badge-success"><i class="icon-minus-sign"></i> 信息与电气工程学院 </span>
                                    <ul>
                                        <li>
                                            <span><i></i> 软件专业</span>
                                            <ul>
                                                <li>
                                                    <span><i></i> 1802班</span>
                                                    <ul>
                                                        <li>
                                                            <span><i></i> web课程</span>
                                                            <ul>
                                                                <li>
                                                                    <span><i></i> 一东403教室</span>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="left-mode">
                <div class="tianjia">+</div>
                <button>重新上传</button>
                <button>播放</button>
            </div>
        </div>
        <div class="center">
            <div class="title">一东403教室</div>
            <div class="video"> <video src=""></video></div>
            <div class="mode">
                <div class="mode-list">
                    抓拍结果
                </div>
                <div class="img-list">
                    <div class="img img1"></div>
                    <div class="img"></div>
                    <div class="img"></div>
                </div>
                <div class="ltnlist">
                    <!-- <button>抓拍</button>
                    <button>上传</button> -->
                </div>
            </div>
        </div>
        <div class="right">
            <div id="dataline"></div>
            <div id="datacrc"></div>
            <div class="datanum">
                <div>
                    应到人数： 45
                </div>
                <div>
                    实到人数： 35
                </div>
            </div>
        </div>
    </div>

    <script>
        const option = {
            xAxis: {
                type: 'category',
                data: ['5分钟', '10分钟', '20分钟', '20分钟', '30分钟', '40分钟', '50分钟']
            },
            title: {
                text: '学生听课率变化图',
                left: 'center'
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [80, 78, 60, 58, 30, 45, 50],
                type: 'line'
            }]
        };
        var myChart = echarts.init(document.getElementById('dataline'));
        myChart.setOption(option);


        const option1 = {
            title: {
                text: '学生听课状态分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['玩手机', '睡觉', '不带课本', '听课', '举手']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 335, name: '玩手机' },
                        { value: 310, name: '睡觉' },
                        { value: 234, name: '不带课本' },
                        { value: 135, name: '听课' },
                        { value: 1548, name: '举手' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };


        var myChart2 = echarts.init(document.getElementById('datacrc'));
        myChart2.setOption(option1);



    </script>
    <script type="text/javascript">
        $(function () {
            $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
            $('.tree li.parent_li > span').on('click', function (e) {
                var children = $(this).parent('li.parent_li').find(' > ul > li');
                if (children.is(":visible")) {
                    children.hide('fast');
                    $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
                } else {
                    children.show('fast');
                    $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
                }
                e.stopPropagation();
            });
        });
    </script>
</body>

</html>